<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<%@include file="../includes/styles.html"%>
<%@include file="../includes/scripts-js.html"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
	
	function displayDiv(component, targer){
		$(component).css("display", "none");
		$(targer).css("display", "block");
	}
	function addInstitution(){
		if ($("#participating").css("display") == "block"){
			$('#participatings').append(
					new Option($('#participatingName').val(), $('#participatingName').val(), false, false)
			);
		}else{
			$('#fundings').append(
					new Option($('#fundingName').val(), $('#fundingName').val(), false, false)
			);
		}
	}
	
	function removeInstitution(){
		if ($("#participating").css("display") == "block"){
			$("#participatings option:selected").remove();
		}else{
			$("#fundings option:selected").remove();
		}
	}
	
	function prepare2submit(){
		$('select#participatings > option').prop('selected', 'selected');
		var j = 0;
		for(var i = 0; i < $('#participatings').val().length; i++){
			var item = $('#participatings').val()[i];
			$('#form').append('<input type="hidden" name="project.institutions['+ i +'].name" value="'+ item +'" />');
			$('#form').append('<input type="hidden" name="project.institutions['+ i +'].type" value="PARTICIPATING" />');
			
			j = i;
		}
		$('select#fundings > option').prop('selected', 'selected');
		for(var i = 0; i < $('#fundings').val().length; i++){
			var item = $('#fundings').val()[i];
			j++;
			$('#form').append('<input type="hidden" name="project.institutions['+ j +'].name" value="'+ item +'" />');
			$('#form').append('<input type="hidden" name="project.institutions['+ j +'].type" value="FUNDING" />');
						
		}		
	}
</script>
</head>
<body>         
	<c:if test="${not empty errors}">
	    <div class="alert alert-error">
	        <a class="close" data-dismiss="alert" href="#">x</a>
	        <h4 class="alert-heading">Error list!</h4>
	        <c:forEach var="error" items="${errors}">
				<c:out value="${error.message}"/>
			</c:forEach>                        
	    </div>   
	</c:if>

	<div>
		<form class="well form-horizontal"
			action="<c:url value="/project/salve"/>" method="POST" id="form">
			<fieldset>
				<legend>Project</legend>
			</fieldset>
			<div class="row-fluid">
				<div class="span12">
					<div class="span6">
						<label>Name</label> 
						<input type="text" name="project.name" class="span11"/>
						<label>Description:</label> 
						<input type="text" name="project.description" class="span11"/>
						<label>Coordinator:</label> 
						<input type="text" name="project.coordinator"
								class="span11"/>		
						<label>Start Date:</label> 
						<input type="text"
								class="span2"
								name="project.startDate"/>
						<label>End Date:</label> 
						<input type="text"
								class="span2"
								name="project.endDate"/>		
						<label>Notes</label> 
						<textarea class="span11" name="project.notes"></textarea>																																			
					</div>
					<div class="span6">
						<ul class="nav nav-tabs">
						  <li class="active">
						  	<a href="#participating" data-toggle="tab" onclick="displayDiv('#funding', '#participating')">Participating Institutions</a>
						  </li>
						  <li>
						  	<a href="#funding" data-toggle="tab" onclick="displayDiv('#participating', '#funding')">Funding Institutions</a>
						  </li>
						</ul>
						<div id="participating" class="tab-pane fade active in">    					
							<input type="text" class="span12" id="participatingName"/>
							<br/>
							<input class="btn" type="button" value="Add" onclick="addInstitution();"/>
							<input class="btn" type="button" value="Remove" onclick="removeInstitution();"/>
							<br/>	
							<br/>
							<select multiple="multiple" class="span12" style="height: 200px;" id="participatings">				
							</select>	
						</div>		
						<div id="funding" class="tab-pane fade" style="display: none;">    					
							<input type="text" class="span12" id="fundingName"/>
							<br/>
							<input class="btn" type="button" value="Add" onclick="addInstitution();"/>
							<input class="btn" type="button" value="Remove" onclick="removeInstitution();"/>
							<br/>	
							<br/>
							<select multiple="multiple" class="span12" style="height: 200px;" id="fundings">
					
							</select>	
						</div>									
					</div>					
												
				</div>
			</div>	
			<h4>Attached Accounts</h4>
			<select multiple="multiple" style="height: 130px; width: 100%;">
				<option>/home/user/files/test.xml</option>
				<option>/home/user/files/test2.xml</option>
			</select>
			<input class="span3 btn" type="button" value="Open"/>
			<input class="span3 btn" type="button" value="Create"/>
			<input class="span3 btn" type="button" value="Attach"/>		
			<input class="span3 btn" type="button" value="Detach"/>				
			<br/>
			<br/>
			<input type="submit" class="span3 btn btn-primary" value="Save Project" onclick="prepare2submit();"/>
			<input type="submit" class="span3 btn" value="Close Project" style="float: right;"/>
		</form>
	</div>
</body>
</html>
